<template>
  <div class="tag-cat">
    <el-dropdown @command="handleCommand">
      <el-button size="mini">
        音乐
        <el-icon>
          <arrow-down></arrow-down>
        </el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item
            v-for="(item, index) in catlist"
            :key="index"
            :command="item.name"
            :index="index"
            >{{ item.name }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <div class="title">
      <span>热门标签:</span>
      <span
        v-for="(item, index) in tagslist"
        :key="index"
        style="cursor: pointer"
        :class="[curIndex === index ? 'active' : '']"
        @click="changeMusicListCat(item.name, index)"
      >
        {{ item.name }}
        <i style="paddingleft: 8px; color: #666">{{
          index === tagslist.length - 1 ? '' : '|'
        }}</i>
      </span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue'

export default defineComponent({
  emits: ['handleGetSongs'],
  props: {
    tagslist: {
      type: Array as any,
      default: () => []
    }
  },
  setup(props, { emit }) {
    // 这里用计算属性，原因是加载组件时tagslist刚开始为空，所以需要收集依赖达到
    // tagslist值传过来时catlist及时更新
    const catlist = computed<any>(() => {
      const arr = [...props.tagslist]
      return arr.splice(0, 5)
    })
    // 选中标签
    const curIndex = ref(0)
    //点击下拉框的回调
    const handleCommand = (command: string, index: any) => {
      curIndex.value = index.attrs.index
      emit('handleGetSongs', command)
    }
    // 点击标签的回调
    const changeMusicListCat = (name: string, index: number) => {
      curIndex.value = index
      emit('handleGetSongs', name)
    }
    return {
      changeMusicListCat,
      handleCommand,
      catlist,
      curIndex
    }
  }
})
</script>

<style scoped lang="less">
.tag-cat {
  .title {
    font-size: 13px;
    margin-top: 8px;

    .active {
      color: red;
    }
    span {
      margin: 0 8px;
    }
  }
  .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
}
</style>
